import React, { Component } from 'react'
import './index.less'
import { Row,Col,Button,Card} from 'antd';
import { Link } from 'react-router-dom'
import Http from '../../../axios'

export default class User extends Component {
  state={
    name:null,
    sex:null,
    departmentName:null,
    sign:null,
    autograph:null,
    iconAddr:null,
    phone:null,
    mail:null
  }
  componentWillMount() {
    this.queryPersonInfor()
    
  }
  queryPersonInfor=()=>{
    //let target = this;
    Http.request({
      url: '/user/query',
      method: 'get',
      // data: {
      //   username: values.userName,
      //   value: values.password
      // }
    }).then((resData) => {
          this.setState({
            name:resData.data.name,
            sex:resData.data.sex,
            sign:resData.data.sign,
            departmentName:resData.data.departmentName,
            autograph:resData.data.autograph,
            iconAddr:resData.data.iconAddr,
            phone:resData.data.phone,
            mail:resData.data.mail
          })
          console.log(resData.data.name)
      
      // window.localStorage.setItem('remember', values.remember);
      // window.localStorage.setItem('userInfo', JSON.stringify(resData.data));
      // this.props.history.push('/home/culture');
      console.log(resData)
    })
  }
  render() {
    let iconAddr;
    if(this.state.iconAddr){
      iconAddr = this.state.iconAddr
    }else{
      iconAddr = "/assets/home/avatar.jpg"
    }
    return (
      <div className="base-section">
        <Row>
          <Col span={11}></Col>
          <Col  span={2}>
          <Card className="personal" bodyStyle={{ padding: 0 }}>
            <div className="personal-image">
              {/* <img alt="avatar" src={"/api" + this.state.iconAddr} /> */}
              <img alt="avatar" src={iconAddr} />
            </div>
            {/* <div className="personal-card">
              <h3>头像</h3>
            </div> */}
          </Card>
          
          </Col>
          <Col span={11}></Col>
        </Row>
        <Row>
          <Col span={10}></Col>
          <Col span={8}>
            <Row className="name">
              <Col span={8} >姓名</Col>
              <Col span={1}></Col>
              <Col  span={15}>{this.state.name}</Col>
            </Row>
            <Row className="name">
              <Col span={8} >性别</Col>
              <Col span={1}></Col>
              <Col span={15} className={this.state.sex==0 ? "":"react-show"}>男</Col>
              <Col span={15} className={this.state.sex==1 ? "":"react-show"}>女</Col>
              
            </Row>
            <Row className="name">
              <Col span={8} >部门</Col>
              <Col span={1}></Col>
              <Col span={15}>{this.state.departmentName}</Col>
            </Row>
            <Row className="name">
              <Col span={8} >星座</Col>
              <Col span={1}></Col>
              <Col span={15}>{this.state.sign}</Col>
            </Row>
            <Row  className={this.state.autograph!=="" ? "name" : "react-show"}>
              <Col span={8} >个性签名</Col>
              <Col span={1}></Col>
              <Col span={15}>{this.state.autograph}</Col>
            </Row>
            <Row  className={this.state.phone!=="" ? "name" : "react-show"}>
              <Col span={8} >电话</Col>
              <Col span={1}></Col>
              <Col span={15}>{this.state.phone}</Col>
            </Row>
            <Row  className={this.state.mail!=="" ? "name" : "react-show"}>
              <Col span={8} >邮箱</Col>
              <Col span={1}></Col>
              <Col span={15}>{this.state.mail}</Col>
            </Row>
            
          </Col>
          <Col span={6}></Col>
        </Row>
        <Row className="modify">
          <Col span={18}></Col>
          <Col span={6}>
            <Link to="/home/modify">
              <Button type="primary" onClick={this.goBack}>完善或修改个人资料</Button>
            </Link>
          </Col>
          
        </Row>
        
      </div>
    )
  }
}
